import { Directive, ElementRef, HostListener, AfterViewInit, Renderer2, Input } from '@angular/core';

/**
 * HoverCopyButtonDirective 指令用于在鼠标悬停在元素上时显示一个复制按钮，
 * 点击该按钮可以将元素内的文本内容复制到剪贴板，同时支持自定义按钮样式和复制回调。
 */
@Directive({
  selector: '[HoverCopyButton]'
})
export class HoverCopyButtonDirective implements AfterViewInit {
  /**
   * 复制按钮元素，用于触发复制操作。
   */
  private copyButton!: HTMLButtonElement;
  /**
   * 按钮距离元素顶部的位置，默认为 '40px'。
   */
  @Input() buttonTop: string = '20px';
  /**
   * 按钮距离元素右侧的位置，默认为 '0px'。
   */
  @Input() buttonRight: string = '0px';
  /**
   * 复制操作完成后的回调函数，接收一个布尔值表示复制是否成功。
   */
  @Input() onCopyCallback: (success: boolean) => void = () => {}; 
  /**
   * 自定义按钮的样式类名，多个类名用空格分隔。
   */
  @Input() buttonClass: string = ''; 

  /**
   * 构造函数，注入 ElementRef 和 Renderer2 用于操作 DOM。
   * @param el - 当前指令所在元素的引用。
   * @param renderer - 用于安全地操作 DOM 的渲染器。
   */
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  /**
   * 组件视图初始化完成后调用，创建复制按钮并设置其位置和初始状态。
   */
  ngAfterViewInit() {
    this.createCopyButton();
    this.setButtonPosition();
    this.showButton();
    //this.hideButton();
  }

  /**
   * 创建复制按钮，设置其文本、样式和点击事件监听器，并添加到 DOM 中。
   */
  private createCopyButton() {
    this.copyButton = this.renderer.createElement('button');
    this.renderer.addClass(this.copyButton, 'copy-button');
    this.renderer.addClass(this.copyButton, 'btn');
    this.renderer.addClass(this.copyButton, 'btn-primary');
    // 添加自定义样式类
    if (this.buttonClass) {
      const classes = this.buttonClass.split(' ');
      classes.forEach((cls) => {
        this.renderer.addClass(this.copyButton, cls);
      });
    }
    this.renderer.setProperty(this.copyButton, 'textContent', '复制');
    this.renderer.listen(this.copyButton, 'click', () => this.copyCode());
    this.renderer.appendChild(this.el.nativeElement.parentNode, this.copyButton);
  }

  /**
   * 设置复制按钮的位置，使其相对于当前元素定位。
   */
  private setButtonPosition() {
    const hostRect = this.el.nativeElement.getBoundingClientRect();
    this.renderer.setStyle(this.copyButton, 'position', 'absolute');
    this.renderer.setStyle(this.copyButton, 'top', this.buttonTop);
    this.renderer.setStyle(this.copyButton, 'right', this.buttonRight);
  }

  /**
   * 复制当前元素的文本内容到剪贴板，并根据复制结果调用回调函数。
   */
  private copyCode() {
    const text = this.el.nativeElement.textContent;
    if (text) {
      navigator.clipboard.writeText(text).then(() => {
        console.log('代码已复制到剪贴板');
        this.onCopyCallback(true);
      }).catch((err) => {
        console.error('复制代码时出错: ', err);
        this.onCopyCallback(false);
      });
    } else {
      this.onCopyCallback(false);
    }
  }

  /**
   * 显示复制按钮。
   */
  private showButton() {
    this.renderer.setStyle(this.copyButton, 'display', 'block');
  }

  /**
   * 隐藏复制按钮。
   */
  private hideButton() {
    this.renderer.setStyle(this.copyButton, 'display', 'none');
  }
}
